<template>
	<view class="y-flex y-row" @tap="handleTap">
		<view class="y-flex y-align-center y-justify-center mr-20" v-if="enableOrder">
			<text class="pt-10 pb-10 pl-20 pr-20 fs-26 fr-fff" :style="{'background-color': orderColor}">{{index + 1}}</text>
		</view>
		<view class="y-flex y-row y-flex-1">
			<view class="y-flex" :class="{'mr-10': item.title || item.description || item.subtitle}" :style="{
				'width': _pixelunit(cellImageWidth),
				'height': _pixelunit(cellImageHeight)
			}">
				<find-image class="y-flex-1" v-if="item.cover" lazy-load :border-radius="cellImageBorderRadius" :src="item.cover" mode="aspectFill" :tip-size="cellImageTipSize"></find-image>
				<empty-image class="y-flex-1" v-else :border-radius="cellImageBorderRadius" :size="cellImageTipSize"></empty-image>
			</view>
			<view class="y-flex y-flex-1" :class="infoClass">
				<com-text size="30" :lines="cellTitleLines" :color="titleColor" :value="item.title"></com-text>
				<com-text v-if="item.description" class="y-flex-1 mt-10 mb-10" size="24" :lines="cellDescriptionLines" :color="textColor" :value="item.description"></com-text>
				<text v-if="item.subtitle" class="fs-24 lines-1" :style="{color: subtextColor}">{{item.subtitle}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import EmptyImage from '../EmptyImage.vue'
	import FindImage from '../Image.vue'
	export default {
		inject: ['getSkinColor', 'navigate'],
		components: {
			EmptyImage,
			FindImage
		},
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			index: {
				type: Number,
				default: -1
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			orderColor () {
				const index = this.index
				return index == 0 ? '#FA684B' : index == 1 ? '#FF8D41' : index == 2 ? '#F7C325' : this.skinColor.color_gap_1
			},
			//图片宽度
			cellImageWidth () {
				return this.options.cellImageWidth || 120
			},
			//图片高度
			cellImageHeight () {
				return this.options.cellImageHeight || 160
			},
			//图片圆角
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			//标题最大显示行数
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			//简介最大显示行数
			cellDescriptionLines () {
				return this.options.cellDescriptionLines || 3
			},
			//图片提示文字大小
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			//是否开启序号显示（主要用于排行榜单）
			enableOrder () {
				return this.options.enableOrder || false
			},
			infoClass () {
				return this.item.title && !this.item.description && !this.item.subtitle ? 'y-justify-center' : 'y-justify-between'
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>